<template>
    <el-card class="card" style="max-width: 75vw">
      <div class="card-header">
        <span class="title"> 推荐作品 </span>
      </div>
      <div>
        <el-table class="listTable" :data="worksListData" :border=true style="width: 100%" :max-height="'70vh'">
          <el-table-column prop="title" label="作品标题" :width="tableWidth[0]" :align="'center'" />
          <el-table-column prop="createTime" label="发布时间" :width="tableWidth[1]" :align="'center'" />
          <el-table-column prop="clubName" label="所属社团" :width="tableWidth[2]" :align="'center'" />
          <el-table-column prop="options" label="操作" :width="tableWidth[3]" :align="'center'">
            <template #default="scope">
              <el-button id="buttonShow" @click="handleShowButton(scope.row)">查看</el-button>
              <el-button v-if="scope.row.suggested==0" type="primary" id="buttonEdit" @click="recommendButton(scope.row)">推荐</el-button>
              <el-button v-if="scope.row.suggested==1" type="danger" id="buttonDelete" @click="recommendButton(scope.row)">取消推荐</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footerpager">
        <el-select v-model="pageSize" @change="onOptionChange" placeholder="Select" style="width: 120px">
          <el-option v-for="size in pageSizeOptions" :key="size.value" :label="size.label" :value="size.value" />
        </el-select>
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :pager-count="7"
          @current-change="handleUpdateList" layout="prev, pager, next" :total="totalNum" />
        <div class="pageNow">
          当前
          <input class="pageInput" @blur="onChangePage" v-model="setCurrentPage" />
          页，共
          {{ totalPage }}
          页
        </div>
      </div>
    </el-card>
    <show-works :id="workId" :flag="showFlag"></show-works>
  </template>
  
  <script setup>
  import { onMounted, reactive, ref, watch, onUnmounted } from 'vue';
  import api from '@/api';
  import showMessageTip from '@/utils/showMessage';
  import ShowWorks from './ShowWorks.vue';
  import debounce from '@/utils/debounce';
  
  const tableWidth=ref([]);
  const pageSize = ref(10);
  const tableWidthRatio=ref([0.35,0.2,0.2,0.25]);
  const totalPage = ref(1); //总页数
  const pageSizeOptions = ref([
    { value: 5, label: '5条/页' },
    { value: 10, label: '10条/页' },
    { value: 15, label: '15条/页' },
    { value: 20, label: '20条/页' },
  ]);
  const totalNum = ref(0);
  const currentPage = ref(1);
  const setCurrentPage = ref(1);
  const worksListData = ref([]);
  const addedClubList = ref([]);
  const workId = ref('');
  const showFlag = ref(false);
  var debounceSetColumnSize = null;

  
  const recommendButton = async(rowData)=>{
    if(rowData.suggested==1){
      rowData.suggested=0;
    }
    else rowData.suggested=1;
    const application = ref({
      multiMediaId:rowData.multiMediaId,
      isSuggested:rowData.suggested
    })
      const result = await api.RecommendWork(application.value);
      if(result[0]==0){
        if(result[1].data.code){
          const data =result[1].data
          if(data.msg=='success'){
            showMessageTip('修改成功','success')
          }
          else{
          showMessageTip('操作失败','warning');
        }
        }
        else{
          showMessageTip('操作失败','warning');
        }
      }
      else{
        showMessageTip('网络请求失败','error');
      }
  }
  onMounted(async  () => {
    const width = document.querySelector('.card').getBoundingClientRect().width-40;
    tableWidth.value[3]=width;
    for(let i = 0; i<3 ;i++){
      tableWidth.value[i] = tableWidthRatio.value[i]*width;
      tableWidth.value[3] -= tableWidth.value[i];
    }
    await handleUpdateList();
    await getAddedClubList();
  });
  onMounted( () => {
  debounceSetColumnSize = debounce(setColumnSize, 300);
  window.addEventListener('resize', debounceSetColumnSize);
})
onUnmounted(() => {
  window.removeEventListener('resize', debounceSetColumnSize);
  debounceSetColumnSize.cancel();
});
  const setColumnSize = () => {
    const width = document.querySelector('.card').getBoundingClientRect().width - 40;
    tableWidth.value[3] = width;
    for (let i = 0; i < 3; i++) {
      tableWidth.value[i] = tableWidthRatio.value[i] * width;
      tableWidth.value[3] -= tableWidth.value[i];
    }
  }
  
  const onChangePage = async () => {
    if(Number(setCurrentPage.value) > totalPage.value){
      setCurrentPage.value = totalPage.value;
      currentPage.value = totalPage.value;
    }
    else if(setCurrentPage.value <= 0){
      setCurrentPage.value = 1;
      currentPage.value = 1;
    }
    else{
      currentPage.value = Number(setCurrentPage.value);
    }
    await handleUpdateList();
  }
  
  const onOptionChange = () => {
    setCurrentPage.value = 1;
    currentPage.value = 1;
  }
  
  watch(pageSize, async (newQuestion, oldQuestion) =>{
    await handleUpdateList();
  })
  
  const handleUpdateList = async () => {
    const reqData = reactive({
      pageSize: pageSize.value,
      page: currentPage.value,
    });
    const reqResult = await api.getWorkList(reqData);
    
    if (reqResult[0] == 0) {
      const data = reqResult[1].data;
      if (data.code == 1) {
        worksListData.value = [];
        totalNum.value = data.data.total;
        
        worksListData.value = data.data.rows;
        totalPage.value = Math.ceil(totalNum.value / pageSize.value);
        setCurrentPage.value = currentPage.value;
      }
      else{
        showMessageTip('数据获取失败', 'error');
        return;
      }
    }
    else {
      showMessageTip('网络请求失败', 'error');
      return;
    }
  }
  
  const getAddedClubList = async () => {
    const result = await api.getClubJoined();
    if (result[0] == 0) {
      const data = result[1].data;
      if (data.code == 1) {
        const dataList = data.data;
        for (let i = 0; i < dataList.length; i++) {
          const temp = {
            clubId: dataList[i].clubId,
            clubName: dataList[i].clubName,
          }
          addedClubList.value.push(temp);
  
        }
      }
      else{
      showMessageTip('社团信息获取失败', 'error');
      return;
      }
    }
    else {
      showMessageTip('网络请求失败', 'error');
      return;
    }
  }
  const handleShowButton = (rowData) => {
    workId.value = rowData.multiMediaId;
    showFlag.value = !showFlag.value;
  }
  </script>
  
  <style scoped>
  .listTable{
    margin-top: 14px;
  }
  :deep(.listTable .el-table__header-wrapper th){
    background-color: #549DFD;
    color: #fff;
    font-family: 'Microsoft YaHei';
  }   
  .footerpager{
    margin-top: 20px;
    padding-left: 5px;
    display: flex;
  }
  .pageNow{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14.5px;
  }
  .pageInput{
    margin-left: 5px;
    margin-right: 5px;
    width: 25px;
    text-align: center;
  } 
  .card-header{
    display: flex;
    padding-left: 10px;
  }
  #sendNotice{
    margin-left: auto;
    margin-right: 10px;
    background-color: #00a31b;
    border: none;
  }
  #sendNotice:hover{
    background-color: #1ac437;
  }
  .title {
    margin-left: 5px;
    font-weight: bold;
    font-size: 30px;
    font-family: "黑体";
  }
  #uploadImgButton{
    margin-left:15px;
  }
  </style>